<template>
  <div class="content">
    <template v-if="!$route.query.dialog">
      <el-card class="card1">
        <template #header>
          <div class="header">重置密码</div>
        </template>
        <el-form ref="formInstall" :model="form" status-icon :rules="rules" label-position="left" label-width="auto">
          <el-form-item label="登录名称:">
            <el-input :value="user.user.name" disabled />
          </el-form-item>
          <el-form-item label="旧密码:" prop="old_password">
            <el-input v-model.trim="form.old_password" type="password" placeholder="请输入旧密码" />
          </el-form-item>
          <el-form-item label="新密码:" prop="new_password">
            <el-input v-model.trim="form.new_password" type="password" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="再次确认:" prop="again_password">
            <el-input v-model.trim="form.again_password" type="password" placeholder="请输入确认密码" />
          </el-form-item>
          <div style="display: flex; justify-content: center">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </template>
    <template v-else>
      <el-dialog v-model="dialogVisible" width="500" append-to-body>
        <el-form ref="formInstall" :model="form" status-icon :rules="rules" label-position="left" label-width="auto">
          <el-form-item label="登录名称:">
            <el-input :value="user.user.name" disabled />
          </el-form-item>
          <el-form-item label="旧密码:" prop="old_password">
            <el-input v-model.trim="form.old_password" type="password" placeholder="请输入旧密码" />
          </el-form-item>
          <el-form-item label="新密码:" prop="new_password">
            <el-input v-model.trim="form.new_password" type="password" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="再次确认:" prop="again_password">
            <el-input v-model.trim="form.again_password" type="password" placeholder="请输入确认密码" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="clickCancel">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import useUserStore from '@/store/user.js'
import { useRouter } from 'vue-router'
import { updatePasswordApi } from '@/api/user/index'
import { ElMessage } from 'element-plus'
import md5 from 'md5'

const user = useUserStore()

const formInstall = ref(null)
const router = useRouter()
const form = ref({
  account: '',
  old_password: '',
  new_password: '',
  again_password: '',
})
const rules = reactive({
  old_password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '请输入正确格式的密码', trigger: 'blur' },
  ],
  new_password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '请输入正确格式的密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === form.value.old_password) {
          callback(new Error('新密码不能与旧密码相同'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  again_password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '请输入正确格式的密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.new_password) {
          callback(new Error('与新密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})
const onSubmit = () => {
  if (!formInstall.value) return
  formInstall.value.validate(async (valid) => {
    if (valid) {
      form.value.account = user.user.account
      const res = await updatePasswordApi({ account: form.value.account, new_password: md5(form.value.new_password) })
      if (res.code == 200) {
        // 清除用户数据
        user.loginOut()
        router.replace({ path: '/login' })
        ElMessage.success(res.msg)
      }
    }
  })
}

const dialogVisible = ref(true)
const clickCancel = () => {
  dialogVisible.value = false
  router.back()
}
</script>

<style scoped lang="scss">
.card1 {
  width: 500px;
  margin: 0 auto;
  .header {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }
  .body {
    text-align: center;
  }
}
</style>
@/store/user.js
